<template>
  <div class="component-allotMaterialList">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>
            <span v-if="$route.params.loop==1" ><a @click="$router.go(-2)">库存</a> > <a  @click="$router.go(-1)"> 查看记录</a> >  施工队领料 </span>
            <span v-else>施工队领料</span>
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div  class="container">
      <div>
        <div class="table-title">
          <p>
            <span class="iconfont">&#xe607;</span> 领料出库信息
          </p>
          <div class="btn-group-right" v-if="$route.params.flag == 0">
            <span @click="save">出库</span>
          </div>
        </div>
        <div class="tables">
          <table cellpadding="0" cellspacing="0" border="1">
            <tr>
              <td>出库单号</td>
              <td>
                <el-input v-if="$route.params.flag == 1" v-model="table.formNo" :disabled="write"></el-input>
                <el-input v-else v-model="table.outOrder" :disabled="write"></el-input>
              </td>
              <td>出库日期</td>
              <td>
                <div v-if="$route.params.flag == 1">{{table.outDate | timeFilter}}</div>
                <div v-else>
                  <el-date-picker
                    v-model="table.outDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="timestamp"
                  ></el-date-picker>
                </div>
              </td>
            </tr>
            <tr>
              <td>领料施工队</td>
              <td>
                <el-select :disabled="write" v-model="table.receiverName" clearable @change="selectOption" placeholder="请选择领料施工队" style="margin-left: -62px;width:320px;">
                  <el-option v-for="(item,index) in options" :key="'01'+index" :label="item.orgName" :value="item.orgId"></el-option>
                </el-select>
              </td>
              <td>领料人</td>
              <td>
                <el-input v-model="table.responseUser" :disabled="write"></el-input>
              </td>
            </tr>
            <tr>
              <td>出库位置</td>
              <td>
                <el-select :disabled="write" v-model="table.fromStoreid" clearable placeholder="请选择出库位置" style="margin-left: -62px;width:320px;">
                  <el-option v-for="(item,index) in locationList" :key="'02'+index" :label="item.storeName" :value="item.storeId"></el-option>
                </el-select>
              </td>
              <td>签收单据</td>
              <td>
                <div v-if="$route.params.flag == 0">
                  <el-upload
                    class="upload-demo"
                    action="/api/web/sysFile/uploadFile"
                    :headers="myheader"
                    :data="exe_data"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="successFile"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    accept=".jpg,.png,.JPG,.PNG"
                    :before-upload="beforeAvatarUpload"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">上传文件</el-button>
                    <div slot="tip" style="color: #ccc;" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
                  </el-upload>
                </div>
                <div v-else class="pictureLength">
                  <div style="cursor: pointer;" @click="imgFlag = !imgFlag">{{table.fileName}}</div>
                </div>
              </td>
            </tr>
            <tr>
              <td>项目编码</td>
              <td>
                <el-select :disabled="write" v-model="table.toProno" clearable placeholder="请选择项目编码" style="margin-left: -62px;width:320px;">
                  <el-option v-for="(item,index) in codeList" :key="'03'+index" :label="item" :value="item"></el-option>
                </el-select>
              </td>
              <td></td>
              <td>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="margin-top:20px;">
        <div class="table-title table-titles">
          <p>
            <span class="iconfont">&#xe607;</span> 材料清单
          </p>
          <p v-show="$route.params.flag == 0" @click="addmaterList">+ 添加</p>
        </div>
        <div class="table armorlistTable">
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="materialList"
            style="width: 1100px;margin:0 auto"
            border
          >
            <el-table-column label="序号" align="center" width="70" type="index"></el-table-column>
            <el-table-column label="器材名称" align="center" prop="matName"></el-table-column>
            <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
            <el-table-column label="器材编码" align="center" prop="deviceNum"></el-table-column>
            <el-table-column label="单位" align="center" prop="matUnit"> </el-table-column>
            <el-table-column label="单价" align="center" prop="price"> </el-table-column>
            <el-table-column label="领用数量" align="center" width="150">
              <template slot-scope="scope">
                  <el-input-number v-if="$route.params.flag == 1" size="small" v-model="scope.row.realNum" controls-position="right" :disabled="write"></el-input-number>
                  <el-input-number v-else size="small" v-model="scope.row.realNum" controls-position="right" @input="txtInput(scope.row)" :disabled="write" :min="1" :max="scope.row.num"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="库存数量" align="center" prop="number"></el-table-column>
            <el-table-column label="甲乙供" align="center">
              <!--0-乙供-->
              <template slot-scope="scope">
                <div v-if="scope.row.provideParty == 0">乙供</div>
                <div v-if="scope.row.provideParty == 1">甲供</div>
                <div v-if="scope.row.provideParty == 2">甲乙供</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" v-if="$route.params.flag == 0">
              <template slot-scope="scope">
                <!--<a @click="handleCopy(scope.row)" type="text" size="small" class="red">复制</a>-->
                <a @click="handleCheck(scope.row,scope.$index)" type="text" size="small" class="red">删除</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 1100px;margin-top: 20px;text-align: right;">总计：{{totalCountMoney}} 元</div>
      </div>
    </div>

    <!-- 项目专业弹窗 -->
    <div class="component-model">
      <el-dialog title="选择材料" :visible.sync="dialogVisible" width="800px">
        <div class="input-box">
          <input type="text" style="float:left" v-model="chooseValue" class="model-input" placeholder="请输入关键字">
          <div class="search" style="float:left;margin-bottom: 20px;" @click="findRes">
            <span class="iconfont">&#xe63d;</span>
          </div>
          <div class="checkbox">
            <el-table
              ref="multipleTables"
              :data="checkInfo"
              tooltip-effect="dark"
              style="width:100%"
              border
              :row-key="getRowKey"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" align="center" width="80" :reserve-selection="true"></el-table-column>
              <el-table-column label="器材名称" align="center" width="240" prop="matName"></el-table-column>
              <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
              <el-table-column label="设备码" align="center" prop="deviceNum"></el-table-column>
              <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="component-paging" v-if="checkInfo.length > 0">
              <div class="table-bottom">
                <div class="bottom-left" style="margin-left: 0px;">
                </div>
                <div class="paging">
                  <div class="paging-left">
                    <p>
                      共
                      <span>{{Math.ceil(total/pageSize)}}</span> 页/
                      <span>{{total}}</span> 条数据
                    </p>
                  </div>
                  <el-pagination
                    background
                    @size-change="SizeChange($event,materList,currentPage,pageSize)"
                    @current-change="CurrentChange($event,materList,currentPage,pageSize)"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size.sync="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="addPerson">确定</el-button>
        </span>
      </el-dialog>
    </div>

    <!--图片预览-->
    <div class="component-model">
      <el-dialog title="预览" :visible.sync="imgFlag" width="600px">
        <img :src="exe_img + table.fileUrl" style="max-width: 500px;">
      </el-dialog>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        myheader:{token:localStorage.getItem("token")},//请求头
        buyMoney:0,
        table:{},// 可编辑表格数据
        options:[],//领料单位列表
        supply:'',//供货商
        supplyList:[],//供货商列表
        code:'',//项目编码
        codeList:[],//项目编码列表
        locationList:[],//仓储位置列表
        write: true,// 是否可编辑
        checkInfo:[],//材料列表
        total: 2,// 数据总条数
        pageSize: 10,// 每页显示数据的条数
        currentPage: 1,// 当前显示的页面页码
        dialogVisible: false,
        multiple:[], //选择材料列表
        materialList:[], //渲染选择材料列表
        multipleSelection:[], //提交时选中的列表
        chooseValue:'',//搜索选择的材料
        exe_data:{'parentId':this.$route.params.outId,'bizType':'project.outStore'},//上传文件传递的参数
        fileList: [],//文件列表
        exe_img:img_url,//图片前缀
        imgFlag:false,//图片预览弹框是否显示
        newArray:{},//选中的领料施工队
        delFile:'',//删除文件
      };
    },
    mounted(){
//     0-入库  1-查看详情
      if(this.$route.params.flag == 1){
        this.detailInit();
      }else{
        this.write = false;
        this.selectLocation();
        this.codeLists();
        this.selectList();
      }
    },
    computed:{
      //检测总金额变化
      totalCountMoney() {
        let totalCountMoney = this.totalMoneys();
        return totalCountMoney ? totalCountMoney : 0;
      },
    },
    methods: {
      //计算总金额
      totalMoneys(){
        let that = this;
        that.buyMoney = 0;
        that.materialList.forEach(function(value, index, array) {
          console.log(value.price + value.realNum)
          that.buyMoney += parseFloat(value.price) * parseFloat(value.realNum)
        });
//      console.log(that.buyMoney)
        return that.buyMoney
      },
      //输入比较
      txtInput(val){
        if(parseFloat(val.realNum) > parseFloat(val.number)){
          this.$alert('领用数量超过库存量', '提示', {
            confirmButtonText: '确定',
          });
          val.realNum = '';
        }
      },
      //领料施工队获取选择的信息
      selectOption(){
        this.newArray = this.options.find((item) => {
          if(item.storeId === this.table.receiverName){
            return item
          }
        });
        console.log(this.newArray)
      },
      //领料单位列表
      selectList(){
        let that = this;
        let suCb = function(res){
          that.options = res.data.data;
          console.log(res.data.data)
        };
        let erCb = function(res){
          console.log(res)
        };
        let postData = {
        };
        let palyParam = {
          url: "/api/web/proOutStore/getWorkTeamList",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        };
        that.$https(palyParam)
      },
      save() {
          if(this.table.outOrder==""||this.table.outOrder==undefined||this.table.outDate==""||this.table.outDate==undefined||this.table.toProno==""||this.table.toProno==undefined||this.table.receiverName==""||this.table.receiverName==undefined||this.table.responseUser==""||this.table.responseUser==undefined||this.table.fromStoreid==""||this.table.fromStoreid==undefined||this.fileList.length==0||this.materialList.length==0){
            this.$alert('填写信息有空值', '提示', {
              confirmButtonText: '确定',
            });
          }else{
            for(let i in this.materialList){
              if(this.materialList[i].realNum == undefined || this.materialList[i].realNum == ''){
                this.$alert('材料清单中领用数量不能为空', '提示', {
                  confirmButtonText: '确定',
                });
                return false
              }
            }
            let that = this;
            let suCb = function(res){
              that.$router.push({name:'teamMater'});
              console.log(res.data)
            };
            let erCb = function(res){
              console.log(res)
            };
            let postData = {
              proOutStore: {
                outId: that.$route.params.outId,
                formNo: that.table.outOrder,//出库单号
                outDate: that.table.outDate+"",//出库日期
                receiver: that.table.receiverName,//领料单位
                responseUser: that.table.responseUser,//领料人
                fromStoreid: that.table.fromStoreid,//出库位置
                toProno: that.table.toProno,//项目编码
                formType:'6',
                consigner:'',
                deliveryMan:'',
                remark:'',
              },
              proOutStoreList: that.materialList
            };
            let palyParam = {
              url: "/api/web/proOutStore/insertOutStoreFrozenList",
              methods:'post',
              data: postData,
              success: suCb,
              error: erCb,
            };
            /*let postData = {
               outId: that.$route.params.outId,
               proOutStore: {
               toProno: that.table.toProno,
               outOrder: that.table.outOrder,
               responseUser: that.table.responseUser,
               outDate: that.table.outDate,
               fromStoreid: that.table.fromStoreid,
               receiverName: that.newArray.orgName || that.table.receiverName,
               receiver:that.newArray.storeId,
               toStoreid:that.newArray.storeId
               },
               proOutStoreList: that.materialList
            }
            let palyParam = {
              url: "/api/web/proOutStore/addOutStoreByConstruction",
              methods:'post',
              data: postData,
              success: suCb,
              error: erCb,
            }*/
            that.$https(palyParam)
          }
      },
      //选择仓储位置
      selectLocation(){
        let that = this;
        let suCb = function(res){
          that.locationList = res.data.data;
          console.log(res.data.data)
        };
        let erCb = function(res){
          console.log(res)
        };
        let postData = {
        };
        let palyParam = {
          url: "/api/web/sysStore/selectStoreName",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        };
        that.$https(palyParam)
      },
      //点击添加材料
      addmaterList(){
        this.chooseValue = "";
        if(this.table.fromStoreid == undefined||this.table.toProno==undefined){
          this.$alert('请选择出库位置和项目编码', '提示', {
            confirmButtonText: '确定',
          });
        }else{
          this.materList();
          this.$nextTick(function () {
            if(this.materialList.length>0){
              this.$refs.multipleTables.clearSelection();
            }
          })
        }
      },
      getRowKey(row){
        return row.smId
      },
      //材料列表
      materList(){
        let that = this;
        let suCb = function(res){
          that.dialogVisible = true;
          that.checkInfo = res.data.data.list;
          that.total = res.data.data.rowCount;
          console.log(res.data)
        };
        let erCb = function(res){
          console.log(res)
        };
        let postData = {
          storeId:that.table.fromStoreid,
          proNo:that.table.toProno,
          pageSize:that.pageSize,
          pageCurrent:that.currentPage,
          matName:that.chooseValue
        };
        let palyParam = {
          url: "/api/web/proOutStoreList/getShipmentsStore",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        };
        that.$https(palyParam)
      },
      //选中添加到页面
      addPerson(){
        this.dialogVisible = false;
//        this.materialList = this.multiple;
        this.materialList = this.materialList.concat(this.multiple);
        let hash = {};
        this.materialList = this.materialList.reduce(function(item, next) {
          hash[next.matId] ? '' : hash[next.matId] = true && item.push(next);
          return item
        }, [])
        console.log(this.materialList)
      },
      //全选
      handleSelectionChange(val) {
        this.multiple = val
      },
      //搜索
      findRes(){
        this.currentPage = 1;
        this.materList();
      },
      //点击复制
      handleCopy(val){
        let arr = this.deepClone(val);
        this.materialList.push(arr)
      },
      //点击删除
      handleCheck(val,index){
        this.materialList.splice(index,1);
        /*let newArr = this.materialList.filter(item => {
          if(val.matId !== item.matId) {
            return true
          }
        })
        this.materialList = newArr;*/
      },
      //项目编码
      codeLists(){
        let that = this;
        let suCb = function(res){
          that.codeList = res.data.data;
          console.log(res.data.data)
        };
        let erCb = function(res){
          console.log(res)
        };
        let postData = {
        };
        let palyParam = {
          url: "/api/web/sysMaterial/getProNoByOrgId",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        };
        that.$https(palyParam)
      },
      //详情信息
      detailInit(){
        let that = this;
        let suCb = function(res){
          that.materialList = res.data.data.outStoreList;
          that.table = res.data.data || {};
          console.log(res.data)
        };
        let erCb = function(res){
          console.log(res)
        };
        let postData = {
          id:that.$route.params.outId
        };
        let palyParam = {
          url: "/api/web/proOutStoreList/getInfoByConstruction",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        };
        that.$https(palyParam)
      },
      //文件上传
      handleRemove(file, fileList) {
        if(file.status == "success") {
          let that = this;
          let suCb = function(res){
            that.fileList = []
          };
          let erCb = function(res){
            console.log(res)
          };
          let postData = {
            parentId:that.$route.params.outId,
            fileUrl:that.delFile
          };
          let palyParam = {
            url: "/api/web/sysFile/deleteFile",
            methods:'post',
            data: postData,
            success: suCb,
            error: erCb,
          };
          that.$https(palyParam)
        }else{
          this.fileList = []
        }
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，请先删除再上传`);
      },
      beforeRemove(file, fileList) {
        return true;
//        return this.$confirm('确认删除吗？');
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 10MB!');
        }
        return isLt2M;
      },
      successFile(response, file, fileList){
        this.delFile = file.response.fileUrl;
        this.fileList = fileList;
      },
    }
  };
</script>

<style scoped>
  .container {
    width: 1100px;
    margin: 30px auto;
  }
  .table-titles{
    overflow: hidden;
    background: #F3F3F3;
    border:1px solid #E4E4E4;
    border-bottom: none;
    padding: 0 10px;
  }
  .table-titles p:first-of-type{
    float: left;
  }
  .table-titles p:last-of-type{
    float: right;
    border:1px solid #ccc;
    background: #fff;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    cursor: pointer;
  }
  .table-title p {
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    font-size: 16px;
    color: #666;
    text-align: left;
    line-height: 40px;
  }

  .tables table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 12px;
  }
  .tables table td:nth-of-type(2n + 1) {
    text-align: right;
    padding-right: 20px;
    width: 140px;
    background: #f9fafc;
  }

  .table-title > div:last-of-type {
    float: right;
    margin: -45px 20px 10px;
  }
  .table-title > div:last-of-type span {
    display: inline-block;
    margin-left: 20px;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 4px;
  }
  .table-title > div:last-of-type span:first-of-type {
    border: 1px solid #e4e4e4;
    color: #666;
    background: #fff;
  }
  .table-title > div:last-of-type span:last-of-type {
    border: 1px solid #1abc9c;
    color: #fff;
    background: #1abc9c;
  }

  .uploadBtn{
    height: 26px;
    line-height: 26px;
    margin: 7px;
    width: 90px;
    color: #1abc9c;
    border: 1px solid #1abc9c;
    background-color: #fff;
  }
  .uploadBtn:hover{
    color: #fff;
    background-color: #1abc9c;
  }
  a{
    color: #1ABC9C;
    cursor: pointer;
  }
  /* 弹窗样式 */
  .model-input {
    width: 190px;
    height: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    color: #ccc;
  }
  .search {
    width: 40px;
    height: 30px;
    border: 1px solid #ccc;
    border-left: none;
    line-height: 30px;
    background-color: #ccc;
  }
  .search:hover {
    cursor: pointer;
  }

  .radio-group {
    padding-top: 30px;
    padding-left: 30px;
  }

  .radio-group .el-radio {
    height: 30px;
  }

  .addpro {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #ccc;
  }
  .addpro:hover {
    cursor: pointer;
  }

  .upload:hover {
    cursor: pointer;
  }

  .btn-search {
    display: inline-block;
    float: right;
    width: 80px;
    height: 40px;
    background-color: #1abc9a;
    margin-top: 50px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    line-height: 40px;
  }
  .btn-search:hover {
    cursor: pointer;
  }

  .el-table .cell a {
    color: #1abc9a;
    text-decoration: none;
    cursor: pointer;
  }
  .checkbox{
    text-align: left;
    margin: 20px 0;
  }
  .component-paging .table-bottom{
    width: 102% !important;
    margin-top: 30px;
    border:none;
  }

</style>
